<template>

  <div>
    <div>
      <el-row>
        <el-col
            v-for="(food, index) in foodList"
            :key="food.id"
            :span="8"
            :offset="index > 0 ? 2 : 0"
        >
          <el-card :body-style="{ padding: '0px' }" >
            <div class="img-wrap">
              <img
                  :src="food.image"
                  class="image"
              />
            </div>

            <div style="padding: 12px" class="position-father">
              <p>{{food.name}}</p>
              <div class="bottom">
                <time class="time">{{food.desc}}</time>
                <div class="bottom-inner">
                  <el-button size="small" class="button">编辑</el-button>
                </div>

                <el-tag size="small" class="the-tag-price" type="danger">${{food.price}}</el-tag>
<!--                <el-tag size="small" class="the-tag">分类: {{food.category_id}}</el-tag>-->

              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <RoleDialog ref="roleDialogRef" @refresh="getTableData"></RoleDialog>
  </div>
</template>

<script setup lang="ts">
import RoleDialog from "./dialog.vue"
import {getCategory} from "../../../api/epgms/menu/category";
import {onMounted, reactive, ref} from "vue";
import {getFood} from "../../../api/epgms/menu/food";
import card from "./compoments/card/index.vue"

const roleDialogRef = ref();
const currentDate = ref(new Date)
const foodList = reactive([])
const getFoodFunc = async () => {
  foodList.splice(0, foodList.length)
  const { data: {food_list} } = await getFood()
  console.log(food_list)
  foodList.push(...food_list)
  for (const foodListElement of food_list) {
    foodListElement.image = import.meta.env.VITE_MENU_PATH + "/" +foodListElement.image
    // console.log(foodListElement.image)
  }
}
getFoodFunc()

const onOpenAddFood = (type: string, payload: any = {}) => {
  roleDialogRef.value.openDialog(type, payload);
};

const getTableData = async (payload, method) => {
  if (method === "修改"){
    // updateUserAdmin(payload).then(res => {
    //   getUser()
    //   roleDialogRef.value.clearForm()
    // })
    console.log("修改")
  }else if(method === "新增"){
    // register(payload).then(res => {
    //   getUser()
    //   roleDialogRef.value.clearForm()
    // })
    console.log("新增")
  }
};
</script>

<style scoped lang="less">
.el-col{
  padding: 6px;
  margin-left: unset;
  max-width: 20%
}

.time{
  padding-right: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 12px;
  color: #999;
}
.position-father{
  height: 100px;
}
.bottom-inner{
  justify-content: space-between;
  align-items: center;
}
.bottom{
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.position-father{
  position: relative;
  padding: 12px;
}
.the-tag{
  position: absolute;
  right: 12px;
  top: 30px
}
.the-tag-price{
  position: absolute;
  right: 12px;
  top: 21px;
}
.bottom{
  margin-left: 5px;
}

.img-wrap {
  position: relative;
  width: 100%;
  height: 0px;
  padding-top: 100%; // padding-bottom都可以
  img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}
//.add{
//  margin-left: 10px;
//}
//.el-button{
//  margin-top: 5px;
//}
//.el-button{
//  margin-left: unset;
//}
</style>